<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="corner-box mb-10">
        <el-button type="primary" size="small" @click="gotoDetail(0)">添加楼层</el-button>
        <el-button size="small" @click="floorDataFn">全局预览</el-button>
        <el-button size="small" @click="videoVisible=true">录像机管理</el-button>
      </div>
      <!--本体列表，数据 -->
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableStyle.tableStripe"
          :border="tableStyle.tableBorder"
          tooltip-effect="dark"
          style="width: 100%"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
        <el-table-column
            prop="name"
            label="楼层"
            align="center">
        </el-table-column>
        <el-table-column
            label="楼层图"
            align="center">
          <template slot-scope="scope">
            <viewerModle type="1" :imgSrc="scope.row.map"></viewerModle>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="390"
            align="center">
          <template slot-scope="scope">
            <el-button size="small" @click="gotoDetail(scope.row)">编辑详情</el-button>
            <el-button size="small" @click="editPoint(scope.row)">平面分区标注</el-button>
            <el-button size="small" @click="previewMapFn(scope.row)">楼层预览</el-button>
            <el-button size="small" @click="deleteFn(scope.row.id)" plain type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <!--    编辑-->
    <editFloor :visible.sync="detailVisible" :floorId="floorId" @InitFn="InitFn"></editFloor>
    <!--    左边点编辑-->
    <pointList :visible.sync="pointVisible" :floorId="floorId" :floorName="floorName" :mapPic="mapPic"></pointList>
    <!--    预览楼层-->
    <previewMap :visible.sync="previewVisible" :floorId="floorId" :floorName="floorName" :mapPic="mapPic"></previewMap>
    <!--    预览整栋楼的数据内容-->
    <previewDataFloor :visible.sync="floorDataVisible"></previewDataFloor>
    <!--    硬盘录像机-->
    <videoRecorder :visible.sync="videoVisible"></videoRecorder>
  </div>
</template>

<script>
import {pagination, tableoption, hourTime} from '@/utils/util.js'
import editFloor from "./edit";
import pointList from "./pointList";
import previewMap from "./previewMap";
import previewDataFloor from "./previewDataFloor";
import videoRecorder from "./videoRecorder";

export default {
  components: {
    editFloor,
    pointList,
    previewMap,
    previewDataFloor,
    videoRecorder
  },
  data() {
    return {
      videoVisible: false,
      floorDataVisible: false,
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      detailVisible: false,
      floorId: 0,
      pointVisible: false,
      floorName: '',
      previewVisible: false,
      mapPic: ''
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.$fetch(this.api.floor.index, {p: this.page.pageindex}).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data;
          this.page.total = response.list.total;
        } else {

        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleDetel(index) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    detelRespon(index) {
      this.$post(api.task_delete, {id: this.arryList[index].id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    gotoDetail(option) {
      this.floorName = option ? option.name : '';
      this.floorId = option ? option.id : '';
      this.detailVisible = true;
    },
    editPoint(option) {
      this.floorName = option.name
      this.floorId = option.id;
      this.mapPic = option.map;
      this.pointVisible = true;
    },
    previewMapFn(option) {
      console.log('查看图片内容信息：', option)
      this.floorName = option.name;
      this.floorId = option.id;
      this.mapPic = option.map;
      this.previewVisible = true;
    },
    floorDataFn() {
      if(this.arryList.length){
        this.floorDataVisible = true
      }else{
        this.$confirm('请添加相应楼层信息！', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
        }).catch(() => {
        });
      }
    },
    deleteFn(id){
      this.$confirm('确认删除该楼层，是否继续？', '提示', {
        confirmButtonText: '确定',
        conCancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteFloorFn(id)
      }).catch(() => {
      });
    },
    async deleteFloorFn(id){
        let data = await this.$fetch(this.api.floor.delete, {id: id});
        if(!data.code){
          this.$message.success(data.msg);
          this.InitFn();
        }
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss">
.evaluateBox {
  background: #eee;
  margin-top: 5px;
  border-radius: 4px;
  padding: 5px;
}

.lookLsit {
  cursor: pointer;
}

.lookLsit:hover {
  text-decoration: underline;
}

#tablebox {
  display: flex;
  flex-direction: column;
}

.el-table {
  color: #000;
}

.right-box .container .main .content-container .input-val-box .input-top {
  width: 250px;
}

</style>
